import React, { Component } from 'react';
import { Form, Input, Button, DatePicker, Loading, Message } from '@alifd/next';
import {
    requestEditProject,
} from '../../../../reducer/MyProjectAction'

import './OperatBasicInfo.scss';

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {xxs: 4, l: 4},
    wrapperCol: {xxs: 20, l: 16}
};

class EditBasicInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSubmit: false,
        }
    }

    onSubmit = async (values) => {
        this.setState({
            isSubmit: true
        })
        const {customerId, itemApplyId} = this.props.data;
        values.itemApplyId = itemApplyId
        values.customerId = customerId;
        if (typeof values.financePayDate == 'object') {
            values.financePayDate ? values.financePayDate.format("YYYY-MM-DD") : values.financePayDate;
        }
        let model;
        try {
            model = await requestEditProject(values);
            console.log('model===',model);
            if (model) {
                this.setState({isSubmit: false})
                Message.show({
                    type: 'success',
                    title: '修改成功',
                    duration: 2000
                })
                //刷新数据
                this.props.refreshLoanItem();
                //退出编辑状态
                this.props.reductionPanel();
            }
        } catch (error) {
            console.log(error)
        }
    }

    render () {
        const { data, hideEdit } = this.props;

        return (
            <Loading tip={'正在提交...'} visible={this.state.isSubmit} style={{width: '100%'}}>
                <Form {...formItemLayout} labelAlign="top" >
                    <section className="form-item-row">
                        <FormItem label="项目编号:">
                            <Input name="itemApplyCode" defaultValue={data.itemApplyCode}/>
                        </FormItem>
                        <FormItem label="贷款合同编号:">
                            <Input name="trustContractCode" defaultValue={data.trustContractCode}/>
                        </FormItem>
                    </section>
                    <section className="form-item-row">
                        <FormItem label="项目标题:">
                            <Input name="itemApplyTitle" defaultValue={data.itemApplyTitle}/>
                        </FormItem>
                        <FormItem label="客户名称:">
                            <Input name="customerName" defaultValue={data.customerName}/>
                        </FormItem>
                    </section>
                    <section className="form-item-row">
                        <FormItem label="贷款金额(元):">
                            <Input name="itemApplyMoney" defaultValue={data.itemApplyMoney}/>
                        </FormItem>
                        <FormItem label="贷款利率:">
                            <Input name="itemApplyRate" defaultValue={data.itemApplyRate}/>
                        </FormItem>
                    </section>
                    <section className="form-item-row">
                        <FormItem label="贷款期限:">
                            <Input name="itemApplyExpires" defaultValue={data.itemApplyExpires}/>
                        </FormItem>
                        <FormItem label="放款日期:">
                            <DatePicker name="financePayDate" defaultValue={data.financePayDate}/>
                        </FormItem>
                    </section>
                    <FormItem style={{textAlign: 'right'}}>
                        <Form.Submit type="primary" onClick={this.onSubmit} >保存编辑</Form.Submit>
                        <Button type="normal" style={{marginLeft: '10px'}} onClick={hideEdit}>取消</Button>
                    </FormItem>
                </Form>
            </Loading>
        )
    }
}



const RenderBasicInfo = (basicDetail) => {
    return (
        <section className="fd-wrapper">
            <section className="appear-wrapper">
                <div className="item left">
                <div className="titleApper">
                项目编号
                </div>
                <div className="content">
                <span>{basicDetail.data.itemApplyCode}</span>
                </div>
                </div>
                <div className="item right">
                <div className="titleApper">
                贷款合同编号
                </div>
                <div className="content">
                <span>{basicDetail.data.trustContractCode}</span>
                </div>
                </div>
            </section>
            <section className="appear-wrapper">
                <div className="item left">
                <div className="titleApper">
                项目标题
                </div>
                <div className="content">
                <span>{basicDetail.data.itemApplyTitle}</span>
                </div>
                </div>
                <div className="item right">
                <div className="titleApper">
                客户名称
                </div>
                <div className="content">
                <span>{basicDetail.data.customerName}</span>
                </div>
                </div>
            </section>
            <section className="appear-wrapper">
                <div className="item left">
                <div className="titleApper">
                贷款金额(元)
                </div>
                <div className="content">
                <span>{basicDetail.data.itemApplyMoney}</span>
                </div>
                </div>
                <div className="item right">
                <div className="titleApper">
                贷款利率
                </div>
                <div className="content">
                <span>{basicDetail.data.itemApplyRate}</span>
                </div>
                </div>
            </section>
            <section className="appear-wrapper">
                <div className="item left">
                <div className="titleApper">
                贷款期限
                </div>
                <div className="content">
                <span>{basicDetail.data.itemApplyExpires}</span>
                </div>
                </div>
                <div className="item right">
                <div className="titleApper">
                放款日期
                </div>
                <div className="content">
                <span>{basicDetail.data.financePayDate}</span>
                </div>
                </div>
            </section>
        </section>
    )
}


export default class OperatBasicInfo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { editBasicInfo, basicDetail, refreshLoanItem, hideEdit, reductionPanel } = this.props;
        if (!basicDetail || !basicDetail.data) {
            return ("");
        }

        if (editBasicInfo) {
            return (<EditBasicInfo {...basicDetail} hideEdit={hideEdit} refreshLoanItem={refreshLoanItem} reductionPanel={reductionPanel}/>)
        } else {
            return (<RenderBasicInfo {...basicDetail} />)
        }
    }
}